<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item>
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部导航 -->
    <div class="tab">
      <router-link to="/home">
        <i class="el-icon-arrow-left" style="font-size: 20px; font-weight: bold; color: #000;"></i>
      </router-link>
      <p style="font-size: 14px; font-weight: bold;margin-left: 20px;">首页轮播图</p>
    </div>
    <!-- 主体 -->
    <div class="content">
      <button class="addBtn" @click="addswi">添加轮播图</button>
      <table>
        <th>顺序</th>
        <th>标题</th>
        <th>链接</th>
        <th>状态</th>
        <th>操作</th>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.sort }}</td>
          <td>{{ item.title }}</td>
          <td>{{ item.http }}</td>

          <td>{{ item.active == '1' ? '显示' : '隐藏' }}</td>
          <td>
            <button class="tabbtn" @click="setSHow(item)">修改</button>
            <button class="tabbtn" @click="dele(item.id)">删除</button>
          </td>
        </tr>
      </table>
      <!-- 添加 -->
      <div class="zz" v-show="srFlag">
        <div class="set">
          <div class="setTop">
            <p style="color: #101010;">添加轮播</p>
            <i class="el-icon-close" style="font-size: 20px;font-weight: bold;" @click="addclose"></i>
          </div>
          <!-- 输入内容 -->
          <div class="sr">
            <div style="padding: 30px 80px;">
              <el-form :model="add">

                <el-form-item>
                  <span>排序</span>
                  <el-select style="margin-left: 32px;" v-model="add.sel" placeholder="请选择">
                    <el-option v-for="item in add.options" :key="item" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <div style="display: flex;">
                    <span>上传图片</span>
                    <el-upload class="upload-demo" action="http://127.0.0.1:7001/upload" :on-success="ok"
                      :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed"
                      :file-list="add.fileList">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                    </el-upload>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div style="display: flex;">

                    <span>轮播名称</span>
                    <el-input style="width: 200px;" v-model="add.sort" placeholder="请输入分类名称"></el-input>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div style="display: flex;">
                    <span>链接地址</span>
                    <el-input style="width: 400px;" v-model="add.httpAd" placeholder="请输入链接地址"></el-input>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div style="display: flex;">
                    <span>状态</span>
                    <el-radio style="margin-top: 13px;" v-model="add.radio" label="1">显示</el-radio>
                    <el-radio style="margin-top: 13px;" v-model="add.radio" label="2">隐藏</el-radio>
                  </div>
                </el-form-item>
              </el-form>
              <div class="btnDiv">
                <button @click="addOk">确定</button>
                <button @click="addclose">取消</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 修改 -->
      <div class="zz" v-show="setFlag">
        <div class="set">
          <div class="setTop">
            <p style="color: #101010;">修改轮播</p>
            <i class="el-icon-close" style="font-size: 20px;font-weight: bold;" @click="setclose"></i>
          </div>
          <div class="sr">
            <div style="padding: 30px 80px;">
              <el-form :model="set">
                <el-form-item>
                  <span>排序</span>
                  <el-select style="margin-left: 32px;" v-model="set.sel" placeholder="请选择">
                    <el-option v-for="item in set.options" :key="item" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <div style="display: flex;">
                    <span>上传图片</span>
                    <el-upload class="upload-demo" action="http://127.0.0.1:7001/upload" :on-success="ok"
                      :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed"
                      :file-list="set.fileList">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                    </el-upload>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div style="display: flex;">

                    <span>轮播名称</span>
                    <el-input style="width: 200px;" v-model="set.sort" placeholder="请输入分类名称"></el-input>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div style="display: flex;">
                    <span>链接地址</span>
                    <el-input style="width: 400px;" v-model="set.httpAd" placeholder="请输入链接地址"></el-input>
                  </div>
                </el-form-item>

                <el-form-item>
                  <div style="display: flex;">
                    <span>状态</span>
                    <el-radio style="margin-top: 13px;" v-model="set.radio" label="1">显示</el-radio>
                    <el-radio style="margin-top: 13px;" v-model="set.radio" label="2">隐藏</el-radio>
                  </div>
                </el-form-item>
              </el-form>
              <div class="btnDiv">
                <button @click="setOk">确定</button>
                <button @click="setclose">取消</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHomeSwiBx, setHomeSwiBx, AddHomeSwiBx, DelHomeSwiBx } from '../../utils/api'
export default {
  data() {
    return {
      data: [],
      add: {
        options: [1, 2, 3, 4, 5, 6, 7, 8],
        // 下拉默认内容
        sel: '',
        radio: '1',
        sort: '',
        httpAd: '',
        fileList: [],
      },
      set: {
        options: [1, 2, 3, 4, 5, 6, 7, 8],
        // 下拉默认内容
        sel: '',
        radio: '1',
        sort: '',
        httpAd: '',
        fileList: [],
        danId: 0,
      },
      srFlag: false,
      setFlag: false,
    }
  },
  created() {
    this.render()
  },
  mounted() {
    this.render()
  },
  methods: {
    // 渲染函数
    render() {
      getHomeSwiBx().then(res => {
        this.data = res.data.data
        res.data.data.sort((a,b)=>{
          return a.sort - b.sort
        })
      })
    },
    // 删除
    dele(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除事件
        DelHomeSwiBx({ id: id }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.render()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 添加确定
    addOk() {
      AddHomeSwiBx({
        title: this.add.sort,
        http: this.add.httpAd,
        active: this.add.radio,
        sort: this.add.sel
      }).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.srFlag = false
          this.render()
        }
      })
    },
    // 修改确定
    setOk() {
      console.log(this.set.danId);
      setHomeSwiBx({
        id: this.set.danId,
        title: this.set.sort,
        http: this.set.httpAd,
        active: this.set.radio,
        sort: this.set.sel
      }).then(res => {
        if (res.status == 200) {
          this.setFlag = false
          this.render()
        }
      })
    },
    setSHow(one) {
      this.set.danId = one.id
      this.setFlag = true
      this.set.sel = one.sort
      this.set.sort = one.title
      this.set.httpAd = one.http
      this.set.radio = one.active
      console.log(one);
    },
    setclose() {
      this.setFlag = false
    },
    addclose() {
      this.srFlag = false
    },
    addswi() {
      this.srFlag = true
    },
    ok(file, fileList) {
      const obj = file.data.replaceAll('\\\\', '\\/')
      const http = "http://127.0.0.1:7001" + obj
      const imghttp = http.replaceAll("\\", "\/")
      this.set.httpAd = imghttp
      this.add.httpAd = imghttp
      console.log(imghttp);

    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
}
</script>
<style scoped> .btnDiv button {
   border: 1px solid rgba(187, 187, 187, 1);
   color: rgba(16, 16, 16, 1);
   font-size: 14px;
   background-color: #fff;
   border-radius: 5px;
   width: 50px;
   height: 30px;
 }

 .btnDiv {
   margin-left: 100px;
   width: 150px;
   display: flex;
   justify-content: space-between;
 }

 .el-upload__tip {
   margin-top: -10px;
   color: red;
 }

 .sr span {

   width: 60px;
   margin-right: 40px;
 }

 .sr {
   width: 100%;
   height: 100%;
   /* margin-top: 30px;
  margin-left: 80px; */
   /* padding: 80px 30px; */

 }

 .setTop {
   padding: 18px 22px;
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid rgba(187, 187, 187, 1);
   ;
 }

 .set {
   font-size: 14px;
   width: 60%;
   height: 500px;
   position: absolute;
   top: 50%;
   left: 60%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   background: #ffffff;
   border-radius: 5px;

 }

 .zz {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.5);
 }

 .tabbtn {
   margin-left: 10px;
   margin-right: 10px;
   border: none;
   font-weight: bold;
   background-color: #fff;
 }

 table {
   margin-top: 30px;
   border: 1px solid #777777;
   border-collapse: collapse;
   text-align: center;
   width: 100%;
   font-size: 14px;
 }

 tr {
   height: 50px;
 }

 td {
   width: 150px;
   border: 1px solid #777777;
 }

 th {
   height: 50px;
   line-height: 50px;
   font-weight: normal;
   background-color: #F6F6F6;
   border: 1px solid #777777;
 }

 .addBtn {
   border: 1px solid rgba(187, 187, 187, 1);
   color: rgba(16, 16, 16, 1);
   font-size: 14px;
   background-color: #fff;
   border-radius: 5px;
   width: 80px;
   height: 30px;
 }

 .content {
   width: 85%;
   margin: 40px auto;
   height: 100%;
 }

 .tab {
   padding: 20px 40px;
   display: flex;
 }
</style>